{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style type="text/css">
	.amap-info-content{padding: 10px 20px 10px 10px;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_account"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow pb-3">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
				<el-tab-pane label="联系方式" name="contacts"></el-tab-pane>
				<el-tab-pane label="高管信息" name="executives"></el-tab-pane>
				<el-tab-pane label="发展历程" name="development_history"></el-tab-pane>
			</el-tabs>
			<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">
				<div v-show="activeName=='basic'">
				  <el-form-item label="企业名称" prop="title">
				    <el-input v-model="form.title" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Title" maxlength="30" show-word-limit :disabled="form.attestation===3"></el-input>
				    <el-tooltip content="认证通过后修改公司名称请联系客服人员，服务热线：{xycms:web name='tel'/}" placement="top">
				    	<i class="el-icon-warning text-primary pointer"></i>
					</el-tooltip>
				  </el-form-item>

				  <el-form-item label="企业简称" prop="stitle">
				    <el-input v-model="form.stitle" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Stitle" maxlength="10" show-word-limit></el-input>
				  </el-form-item>

				  <el-form-item label="企业LOGO" prop="logo">
					  <el-image
					  	v-if="logo" 
					  	class="w-200px h-200px"
					    :src="logo" 
					    :preview-src-list="[logo]"
					    fit="contain">
					  </el-image>
				  	  <el-upload
						  class="avatar-uploader"
						  action="/uploadFiles"
						  name="file"
						  accept="image/png"
						  :data="{path:'company/logo'}"
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :on-error="handleAvatarError">
				  			<el-button size="small" type="primary">选择文件</el-button>
					  </el-upload>
				  </el-form-item>

				  <el-form-item label="企业性质" prop="nature">
				  	<el-select v-model="form.nature" filterable clearable default-first-option placeholder="请选择">
					    <el-option
					      v-for="item in nature"
					      :key="item.value"
					      :label="item.title"
					      :value="item.value">
					    </el-option>
					</el-select>
				  </el-form-item>

				  <el-form-item label="融资阶段" prop="finance">
				  	<el-select v-model="form.finance" filterable clearable default-first-option placeholder="请选择">
					    <el-option
					      v-for="item in finance"
					      :key="item.value"
					      :label="item.title"
					      :value="item.value">
					    </el-option>
					</el-select>
				  </el-form-item>

				  <el-form-item label="所属行业" prop="industry_id">
				  	<el-select v-model="form.industry_id" filterable clearable default-first-option placeholder="请选择" :disabled="form.attestation===3">
					    <el-option
					      v-for="item in industry"
					      :key="item.id"
					      :label="item.title"
					      :value="item.id">
					    </el-option>
					</el-select>
				  </el-form-item>

				  <el-form-item label="公司规模" prop="size_type">
				  	<el-select v-model="form.size_type" filterable clearable default-first-option placeholder="请选择">
					    <el-option
					      v-for="item in size_type"
					      :key="item.value"
					      :label="item.title"
					      :value="item.value">
					    </el-option>
					</el-select>
				  </el-form-item>

				  <el-form-item label="注册资金" prop="registered_capital">
				    <el-input v-model.number="form.registered_capital" class="col-5 col-sm-2 pl-0 pr-0">
					    <template slot="append">万</template>
				    </el-input>
				    <el-radio-group class="ml-0 ml-sm-2" v-model="form.registered_capital_type">
				      <el-radio :label="0">人民币</el-radio>
				      <el-radio :label="1">美元</el-radio>
				    </el-radio-group>
				  </el-form-item>

				  <el-form-item label="企业福利" prop="corporate_welfare">
				  	<el-select v-model="form.corporate_welfare" filterable multiple default-first-option :multiple-limit="6" placeholder="请选择">
					    <el-option
					      v-for="item in corporate_welfare"
					      :key="item.value"
					      :label="item.title"
					      :value="item.value">
					    </el-option>
					  </el-select>
				  </el-form-item>

				</div>
				<div v-show="activeName=='contacts'">
				  <el-form-item label="企业联系人" prop="contacts">
				    <el-input v-model="form.contacts" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="手机号码" prop="contacts_mobile">
				    <el-input v-model="form.contacts_mobile" class="col-12 col-sm-3 pl-0 pr-0" maxlength="11"></el-input>
				  </el-form-item>
				  <el-form-item label="固定电话" prop="contacts_tel">
				  	<div class="flex">
				  		<div>
				    		<el-input v-model="tel.area_code" class="w-100px" maxlength="4"></el-input>
				  		</div>
				  		<div class="px-1">-</div>
				  		<div>
				    		<el-input v-model="tel.number" class="w-200px" maxlength="8"></el-input>
				  		</div>
				  		<div class="px-1">-</div>
				  		<div>
				    		<el-input v-model="tel.extension" class="w-100px" maxlength="6"></el-input>
				  		</div>
				  	</div>
				  </el-form-item>
				  <el-form-item label="微信号" prop="contacts_wechat">
				    <el-input v-model="form.contacts_wechat" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="联系邮箱" prop="contacts_email">
				    <el-input v-model="form.contacts_email" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="公司地址" prop="contacts_area">
				    <el-cascader 
				    	v-model="form.contacts_area"
				    	placeholder="试试搜索：北京"
				    	filterable
						:props="defaultProps"
				    	:options="arealist"
				    	class="col-12 col-sm-6 pl-0 pr-0">
				    </el-cascader>
				  </el-form-item>
				  <el-form-item label="详细地址" prop="contacts_address">
				    <el-input v-model="form.contacts_address" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="公司网址" prop="company_website">
				    <el-input v-model="form.company_website" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="公司简介" prop="company_introduction">
				    <el-input type="textarea" v-model="form.company_introduction" :autosize="{ minRows: 2, maxRows: 20}" class="col-12 col-sm-6 pl-0 pr-0" maxlength="200" show-word-limit></el-input>
				  </el-form-item>
				  <el-form-item label="公司介绍" prop="company_descript">
				    <el-input v-model="form.company_descript" type="textarea":autosize="{ minRows: 4, maxRows: 50}" maxlength="2000" show-word-limit class="col-12 col-sm-6 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item v-if="amapConfig.status && amapConfig.js_status">
				  	<div id="map_container" style="width: 800px;height: 400px;"></div>
				  </el-form-item>
				</div>
				<div v-show="activeName=='executives'">
				  <el-form-item label="高管名称" prop="executives">
				    <el-input v-model="form.executives" class="col-12 col-sm-3 pl-0 pr-0" maxlength="20" show-word-limit></el-input>
				  </el-form-item>

				  <el-form-item label="高管头像" prop="executives_headimg">
					  <el-image
					  	v-if="executives_headimg" 
					  	class="w-80px h-80px"
					    :src="executives_headimg" 
					    :preview-src-list="[executives_headimg]">
					  </el-image>
				  	  <el-upload
						  class="avatar-uploader"
						  action="/uploadFiles"
						  name="file"
						  accept="image/*"
						  :data="{path:'company/executives_headimg'}"
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :on-error="handleAvatarError">
				  			<el-button size="small" type="primary">选择文件</el-button>
					  </el-upload>
				  </el-form-item>

				  <el-form-item label="职位名称" prop="executives_job_title">
				    <el-input v-model="form.executives_job_title" class="col-12 col-sm-6 pl-0 pr-0" maxlength="30" show-word-limit></el-input>
				  </el-form-item>

				  <el-form-item label="高管介绍" prop="executives_desc">
				    <el-input type="textarea" v-model="form.executives_desc" class="col-12 col-sm-10 pl-0 pr-0" :autosize="{ minRows: 4, maxRows: 20}" maxlength="200" show-word-limit></el-input>
				  </el-form-item>
				</div>
				<div v-show="activeName=='development_history'">
					<el-timeline v-if="form.development_history.length>0" class="w-75">
					    <el-timeline-item :timestamp="XYBase.Date.date('Y-m-d',v.time)" placement="top" v-for="(v,index) in form.development_history">
					      <el-card>
					        <h6>{{v.title}}</h6>
					        <p class="text-secondary mb-0">{{v.desc}}</p>
					    	<div class="text-right">
					    		<el-link type="primary" icon="el-icon-edit" :underline="false" @click="editItem(index,v);">编辑</el-link>
								<el-link type="danger" icon="el-icon-delete" :underline="false" @click="delItem(index,v);">删除</el-link>
					    	</div>
					      </el-card>
					    </el-timeline-item>
					</el-timeline>

					<el-form-item label="历程标题" prop="development_history_title">
						<el-input v-model="development_history.title" class="col-12 col-sm-5 pl-0 pr-0"></el-input>
					</el-form-item>

					<el-form-item label="发生时间" prop="development_history_time" class="flex-1">
						<el-date-picker
					      v-model="development_history.time"
					      type="date"
					      placeholder="开始时间"
					      format="yyyy 年 MM 月 d 日"
					      value-format="timestamp">
					    </el-date-picker>
					</el-form-item>

					<el-form-item label="历程简介" prop="development_history_desc">
						<el-input
						  type="textarea"
						  :autosize="{ minRows: 4, maxRows: 10}"
						  placeholder="简要描述历程内容"
						  v-model="development_history.desc"
						  maxlength="200"
						  show-word-limit class="col-12 col-sm-8 pl-0 pr-0">
						</el-input>
					</el-form-item>

					<div class="flex pb-5">
						<div style="width: 120px;"></div>
						<div class="flex-1">
							<el-button type="success" size="mini" @click="editComplete();">{{editForm.development_history?'保存':'添加'}}</el-button>
			    			<el-button @click="resetDevelopmentHistory()" size="mini">取消</el-button>
						</div>
					</div>
				</div>

			  <el-form-item>
			    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</div>
<div style="display: none;">
	<div ref="infoWindow">
		<div class="flex">
			<div v-if="logo" class="pr-2">
				<img :src="logo" height="60" width="60">
			</div>
			<div>
				<div class="h6">{{form.title}}</div>
				<div class="text-secondary small">{{form.contacts_tel}}</div>
				<div class="text-secondary small">{{getAreaText(form.contacts_area)}}{{form.contacts_address}}</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var amapConfig={
		status:{xycms:mapconfig name="status"/},
		server_status:{xycms:mapconfig name="server_status"/},
		js_status:{xycms:mapconfig name="js_status"/},
		js_key:'{xycms:mapconfig name="js_key"/}',
	};
	var nature={xycms:statusalias name="company/nature" serialize="json"/};
	var arealist={xycms:arealist serialize="json"/};
	var finance={xycms:statusalias name="company/finance" serialize="json"/};
	var industry={xycms:industry serialize="json"/};
	var size_type={xycms:statusalias name="company/size_type" serialize="json"/};
	var corporate_welfare={xycms:statusalias name="company/corporate_welfare" serialize="json"/};
	{empty name="Find"}
	var formData={
				mobile:'',
				password:'',
				title:'',
				stitle:'',
				logo:'',
				nature:'',
				finance:'',
				industry_id:'',
				region_id:'',
				size_type:'',
				registered_capital:'',
				registered_capital_type:0,
				corporate_welfare:[],
				contacts:'',
				contacts_mobile:'',
				contacts_wechat:'',
				contacts_tel:'',
				contacts_email:'',
				contacts_address:'',
				contacts_area:[],
				contacts_lng:'',
				contacts_lat:'',
				company_website:'',
				company_introduction:'',
				company_descript:'',
				template_id:'',
				executives:'',
				executives_headimg:'',
				executives_job_title:'',
				executives_desc:'',
				development_history:[]
			};
		var tel={
				area_code:'',
				number:'',
				extension:'',
			};
	var logo='';
	var executives_headimg='';
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var logo='';
	if (formData.logo)
		logo='{:config('web.imgurl')}'+formData.logo;
	var executives_headimg='';
	if (formData.executives_headimg)
		executives_headimg='{:config('web.imgurl')}'+formData.executives_headimg;
	if (formData.contacts_tel) {
		var telArr=formData.contacts_tel.split('-');
		var tel={
				area_code:telArr[0],
				number:telArr[1],
				extension:telArr[2]?telArr[2]:'',
			};
	}else{
		var tel={
				area_code:'',
				number:'',
				extension:'',
			};
	}
	{/empty}
</script>
<script type="text/javascript">
	var map=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			preventWindowClose:false,
			labelPosition:'right',
			activeName:'basic',
			logo:logo,
			amapConfig:amapConfig,
			arealist:arealist,
			executives_headimg:executives_headimg,
			nature:nature,
			finance:finance,
			industry:industry,
			size_type:size_type,
			corporate_welfare:corporate_welfare,
			form:formData,
			tel:tel,
			editForm:{
				development_history:false,
			},
			development_history:{
				id:0,
				index:null,
				title:'',
				desc:'',
				time:''
			},
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	        },
	        rules: {
	          mobile: [
	            { required: true, message: '请输入用户手机号', trigger: 'blur' },
	            { validator: XYBase.hasUserMobile, trigger: 'blur' }
	          ],
	          email: [
	            { validator: XYBase.hasUserEmail, trigger: 'blur' }
	          ],
	          title: [
	            { required: true, message: '请输入企业名称', trigger: 'blur' },
	          ],
	          attestation: [
	            { required: true, message: '请选择企业认证状态', trigger: 'blur' },
	          ],
	          nature: [
	            { required: true, message: '请选择企业性质', trigger: 'change' },
	          ],
	          industry_id: [
	            { required: true, message: '请选择行业', trigger: 'change' },
	          ],
	          size_type: [
	            { required: true, message: '请选择公司规模', trigger: 'change' },
	          ],
	          registered_capital: [
	            { required: true, message: '请输入注册资金', trigger: 'blur' },
	          ],
	          contacts: [
	            { required: true, message: '请输入联系人', trigger: 'blur' },
	          ],
	          contacts_mobile: [
	            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
	          ],
	          contacts_area: [
	            { required: true, message: '请选择公司地址', trigger: 'blur' },
	          ],
	          contacts_address: [
	            { required: true, message: '请输入公司地址', trigger: 'blur' },
	          ],
	          company_descript: [
	            { required: true, message: '请输入公司介绍', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		    activeName(val,oldVal){
		    	if (val==='contacts')
		    		setTimeout("initAmap();",300)
		    },
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
			form:{
				handler(val,oldVal){
					this.preventWindowClose=true;
				},
				deep:true
			},
		    tel:{
				handler(val,oldVal){
					if (val.area_code && val.number) {
						this.form.contacts_tel=val.area_code+'-'+val.number;
						if (val.extension) 
							this.form.contacts_tel=val.area_code+'-'+val.number+'-'+val.extension
					}else{
						this.form.contacts_tel='';
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			getAreaText(area) {
				var areaText='';
				for (var i = 0; i < this.arealist.length; i++) {
					if (area[0]===this.arealist[i].id) {
						areaText=areaText+this.arealist[i].title;
						for (var j = 0; j < this.arealist[i].data.length; j++) {
							if (area[1]===this.arealist[i].data[j].id) {
								areaText=areaText+this.arealist[i].data[j].title;
								for (var n = 0; n < this.arealist[i].data[j].data.length; n++) {
									
									if (area[2]===this.arealist[i].data[j].data[n].id)
									areaText=areaText+this.arealist[i].data[j].data[n].title;
								}
							}
						}
					}
				}
				return areaText;
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'company/logo'){
							this.form.logo=res.data.path;
							this.logo=res.data.url;
						}else if(res.data.type == 'company/executives_headimg'){
							this.form.executives_headimg=res.data.path;
							this.executives_headimg=res.data.url;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			editItem(index,row){
				var obj={
					id:row.id,
					index:index,
					title:row.title,
					desc:row.desc,
					time:row.time
				};
				this.editForm.development_history=true;
				this.development_history=obj;
			},
			delItem(index,row){
				var _this=this;
				_this.$confirm('确定要删除【'+row.title+'】发展历程吗？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					if (row.id) {
						const loading=XYBase.openloading();
						_this.sendGet({
							url:'/user/company/delDevelopmentHistory/'+row.id,
						},function(ret){
							loading.close();
							if (ret) {
								if (ret.code === 0) {
									_this.form.development_history.splice(index,1);
					        		XYBase.success('已删除');
								}else{XYBase.msg(ret.msg);}
							}
						});
					}else{
						_this.form.development_history.splice(index,1);
		        		XYBase.success('已删除');
					}
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			},
			editComplete(){
				var _this=this;
		  		if(_this.development_history.title && _this.development_history.time){
					_this.preventWindowClose=true;
			  		var obj={
			  			id:_this.development_history.id,
			  			title:_this.development_history.title,
						desc:_this.development_history.desc,
						time:_this.development_history.time,
			  		};
			  		if (_this.editForm.development_history && _this.development_history.index!=null) {
			  			obj.edit=1;
				  		_this.form.development_history[_this.development_history.index]=obj;
				  		_this.development_history.index=null;
				  		_this.editForm.development_history=false;
			  		}else{
				  		_this.form.development_history.push(obj);
			  		}
			  		_this.development_history.id=0;
			  		_this.development_history.title='';
			  		_this.development_history.desc='';
			  		_this.development_history.time='';
		  		}
			},
			resetDevelopmentHistory(){
				var obj={
					id:0,
					index:null,
					title:'',
					desc:'',
					time:''
				};
		  		this.editForm.development_history=false;
				this.development_history=obj;
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					_this.sendPost({
						url:'/user/company/saveCompany',
						data:D,
					},function(ret){
				        loading.close();
				        if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
								_this.preventWindowClose=false;
								setTimeout(function(){
									window.location.reload();
								},300);
							}else{
								XYBase.msg(ret.msg);
							}
				        }
					});
				  } else {
				  	if (D.title
				  		&&D.nature!==''
				  		&&D.finance!==''
				  		&&D.industry_id
				  		&&D.size_type!==''
				  		&&D.registered_capital)
				  		return _this.activeName='contacts';
					return XYBase.warning('请先把表单填写完整。');
				  }
				});
			},
		})
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
if (amapConfig.status && amapConfig.js_status && amapConfig.js_key) {
	var url = '//webapi.amap.com/maps?v=2.0&key='+amapConfig.js_key;
	var jsapi = document.createElement('script');
	jsapi.charset = 'utf-8';
	jsapi.src = url;
	document.head.appendChild(jsapi);
}

function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
function initAmap() {
	if (map!==null)return;
	var param={
               resizeEnable: true,
               center:[116.397428, 39.90923],
               zoom:13
            };
        if (vm.form.contacts_lng && vm.form.contacts_lat)
        	param.center=[parseFloat(vm.form.contacts_lng),parseFloat(vm.form.contacts_lat)];
    map = new AMap.Map('map_container', param);
    AMap.plugin('AMap.Geolocation',function(){
        var Geolocation = new AMap.Geolocation();
        map.addControl(Geolocation);
    });
    map.on('click',function(ev) {
    	var lnglat=[ev.lnglat.KL,ev.lnglat.kT];
    	vm.form.contacts_lng=ev.lnglat.KL;
    	vm.form.contacts_lat=ev.lnglat.kT;
    	setInfoWindow(lnglat);
    })
    if (vm.form.contacts_lng && vm.form.contacts_lat)
    	setInfoWindow([parseFloat(vm.form.contacts_lng),parseFloat(vm.form.contacts_lat)]);
}
function setInfoWindow(lnglat) {
    infoWindow = new AMap.InfoWindow({
        content: vm.$refs.infoWindow  //使用默认信息窗体框样式，显示信息内容
    });
    infoWindow.open(map, lnglat);
    AMap.Event.addListener(infoWindow, 'close', infoWindowClose)
}
function infoWindowClose() {
	vm.form.contacts_lng='';
	vm.form.contacts_lat='';
}
window.onbeforeunload=function(e){
	if (vm.preventWindowClose) {
		vm.$confirm('您的企业信息还未保存，确定离开当前页面吗？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	vm.submitForm('form');
        }).catch(() => {
			vm.preventWindowClose=false;
        	XYBase.msg('已取消');
        });
	　　var e = window.event||e;  
	　　e.returnValue=("确定离开当前页面吗？");
	}
}
</script>
{/block}